<template>
    <div class="trend_select_index">
        <template v-if="!monitorStore.isEmpty(monitorState.chartmodule.activeHandicaps)">
            <el-checkbox-group v-model="monitorState.chartmodule.checkpicturelist" @change="monitorStore.getechartsData()">
                <el-checkbox v-for="(key, index) in Object.keys(monitorState.chartmodule.activeHandicaps)" :key="key"
                    :value="key">
                    <div class="checkbox_content">
                        <div class="name" :style="`color:${bctypeColors[key]}`">{{ monitorState.bctypesObj[key] }}</div>
                        <div class="checkbox_drop">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    ({{monitorState.chartmodule.activeHandicaps[key].activevalue == '' ? '' : monitorState.chartmodule.activeHandicaps[key].activevalue}})<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </span>
                                <template #dropdown>
                                    <DropdownIndex :typekey="key" :data="monitorState.chartmodule.activeHandicaps[key]" />
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </el-checkbox>

            </el-checkbox-group>
        </template>
    </div>
</template>

<script setup>
import DropdownIndex from "./DropdownIndex.vue";

const { monitorStore, monitorState } = inject('MonitorStore')
const bctypeColors = ref({
    hga: '#e64d4d',
    ps3838: '#e88d0d',
    kaiyun: '#46a2ea',
    manbet165: '#48a66b',
    imsport: '#0fc4c2',
    isn: '#666666'
})
</script>

<style lang="scss" scoped>
.trend_select_index {
    padding: 0 12px;
    display: flex;
    height: 100%;
    align-items: center;
}

.checkbox_content {
    display: flex;
    align-items: center;

    .name {
        font-size: 12px;
        font-weight: 600;
        color: #000;
    }
}
</style>
<style>
.checkbox_drop .el-dropdown-link {
    display: flex;
    font-size: 12px;
    color: #000;
    margin-left: 4px;
}

.trend_select_index .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #e92937 !important;
    border-color: #e92937 !important;
}
</style>